<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="objcode"
                    label="景点名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="objname"
                    width="240"
                    label="景区地址">
            </el-table-column>
            <el-table-column
                    prop="favtime"
                    width="180"
                    label="收藏时间">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="景区介绍"
                    width="450">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="reserve(scope.$index, scope.row)">去查看
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    <!--    分页查询-->
    <el-pagination
            style="width: 100%;margin-top: 20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let favrid = location.href.split('=')[1];
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 5,
            }
        },
        created: function () {//页面初始化时,需要执行的业务可以放入该方法
            this.loadData(favrid);
        },
        methods: {//存放所有使用的方法
            loadData(favrid) {
                let _this = this;
                //使用axios向后台发请求
                axios.post('/favorite/queryPage',
                    {
                        "pageNo": this.currentPage, "pageSize": this.pageSize,
                        data:{"favrid":favrid}
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.tableData=response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleDelete(index, row) {
                let _this = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/favorite/delete/" + row.id)
                        .then(function (response) {
                            _this.loadData()
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            reserve(index, row) {
                top.location.href = "/html/lvyoule_11_10/yuding/yuding.html?scid="+row.objid;
            },
            //实行每页有多少条的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.loadData();
            },
            //实现跳转页的方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.loadData();
            },
        }
    })
</script>
</body>
</html>